<template>
  <el-drawer v-model="dialogVisible" title="选择文件" size="800px" :close-on-click-modal="false" append-to-body width="620"
    class="editDialog" align-center>
    <div class="innerPane">
      <div class="filterArea">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="文件名称">
            <el-input @keyup.enter="search" v-model="searchForm.fileName" placeholder="请输入文件名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain @click="onClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table ref="tableRef" :data="tableData" border row-key="mapMacCode" style="width: 100%; margin-top: 20px"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column header-align="center" type="selection" width="50" />
        <el-table-column header-align="center" type="index" label="序号" width="50" :index="indexMethod" />
        <el-table-column header-align="center" prop="fileName" label="文件名" />
        <el-table-column header-align="center" prop="img" label="设备图片" width="160">
          <template #default="scope">
            <el-image v-if="scope.row.fileUrl" :src="scope.row.fileUrl" style="object-fit: cover; cursor: pointer;"
              :preview-src-list="[scope.row.fileUrl]" :initial-index="0" fit="cover" preview-teleported />
          </template>
        </el-table-column>
        <el-table-column header-align="center" prop="createTime" label="上传时间" width="120" />

        <el-table-column label="操作" header-align="center" width="100" prop="col9">
          <template #default="scope">
            <el-link plain type="primary" size="small" @click="handleSelectRow(scope.row)">选择</el-link>

          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
        :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


    <el-dialog v-model="fileNameDialogVisible" title="设置文件名" width="500">
      <el-input v-model="setlectRow.fileName" placeholder="请输入自定义文件名"></el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="fileNameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSelectAttach">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-drawer>
</template>

<script setup>
import { ref, defineExpose, reactive } from "vue";
import { saveSettingPage, getSettingPage } from "../../utils/requests";
import { ElMessage } from "element-plus";

import {
  reqAttachList
} from "@/utils/requests";

const emits = defineEmits(["confirm"]);

let dialogVisible = ref(false);

let fileNameDialogVisible = ref(false);

let setlectRow = ref(null);

let tableData = ref([]);

let total = ref(0);

/* 1. 初始值常量 */
const initialForm = () => ({
  current: 1,
  size: 10,
  fileName: "",
  fileSource: 'project_cad_source_file',
})


// 搜索条件 
let searchForm = reactive(initialForm());
const onClear = () => {
  Object.assign(searchForm, initialForm());

  search();
};


const handleSizeChange = (size) => {
  searchForm.size = size;
  searchForm.current = 1;
  search();
};
const handleCurrentChange = (current) => {
  searchForm.current = current;
  search();
};

const handleSelectRow = (rowData) => {
  fileNameDialogVisible.value = true;
  setlectRow.value = rowData;
}

const handleSelectAttach = () => {
  emits('confirm', setlectRow.value) // 可以带任意参数
  
  fileNameDialogVisible.value = false;
  dialogVisible.value = false;
}

const search = () => {
  reqAttachList(searchForm).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};

const openDialog = (sncode) => {
  dialogVisible.value = true;

  search();
};



defineExpose({ openDialog });

</script>

<style scoped lang="scss"></style>